<template>
	<view class="eventReporting">
		<uni-forms ref="valiForm" :modelValue="model" :rules="rules" label-width="160upx">
			<uni-forms-item label="处理内容" required name="handledResult">
				<uni-easyinput type="textarea" v-model="model.handledResult" placeholder="请输入处理内容" />
			</uni-forms-item>
			<uni-forms-item label="处理附件" name="handledFile">
				<uni-file-picker limit="5" file-mediatype="image" mode="grid" file-extname="png,jpg" title="最多上传5张图片"
					@select="handleImg" @delete="handleImgDelete"></uni-file-picker>
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit('valiForm')" class="uni-button">提交</button>
	</view>
</template>

<script>
	import {
		uploadAction,
		postAction,
		gateway
	} from '@/utils/api'
	export default {
		data() {
			return {
				rules: {
					handledResult: {
						rules: [{
							required: true,
							errorMessage: '处理内容不能为空',
						}, ],
					},
				}, // 校验表单数据
				model: {
					handledFile: [],
					handledResult: '',
				},
				imgData: [],
				url: {
					editStatus: gateway.sysrural + '/village/sysEreportInfo/editStatus',
				}
			}
		},
		onLoad(option) {
			this.model.id = JSON.parse(decodeURIComponent(option.item)).id
		},
		methods: {
			//图片上传
			handleImg(e) {
				this.model.handledFile = []
				e.tempFiles.map(item => {
					this.imgData.push(item)
					uploadAction(item.path).then(res => {
						this.model.handledFile.push(res.result.relPath)
					})
				})
			},
			handleImgDelete(e) {
				this.imgData.map((item, index) => {
					if (item.uuid == e.tempFile.uuid) {
						this.model.handledFile = this.model.handledFile.filter((itm, idx) => {
							if (idx != index) {
								return itm
							}
						})
					}
				})
				this.imgData = this.imgData.filter(item => item.uuid != e.tempFile.uuid)

			},
			submit(ref) {
				this.$refs[ref]
					.validate()
					.then((res) => {
						this.model.handledFile = this.model.handledFile.join(',')
						postAction(this.url.editStatus, this.model).then(res => {
							uni.showToast({
								title: `处理成功`,
							})
							uni.navigateTo({
								url: '/pages/eventList/index',
							})
						})
					})
					.catch((err) => {
						console.log('err', err)
					})
			},
		},
	}
</script>

<style lang="less" scoped>
	.eventReporting {
		width: 100%;
		padding: 28upx;

		.uni-forms-item {
			width: 695upx;
			background: #ffffff;
			border-radius: 18upx;
			padding: 28upx;
		}

		.uni-button {
			width: 100%;
			height: 80upx;
			background: linear-gradient(180deg, #67a0ff, #ede1ff);
			border-radius: 40upx;
		}
	}
</style>